<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Aether : Test Suit</title>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" />
		<link type="text/css" rel="stylesheet" href="./ui.formvalidation.css" />
		<link type="text/css" rel="stylesheet" href="./ui.input.css" />
  	<link rel="stylesheet" title="Default" href="./external/code.css">

		<style type="text/css">
			body {
				font-size: 62.5%;
				font-family: Verdana;
			}

			p {
				font-size: 1.1em;
			}

			pre,code {
				font-size: 1.2em;
				display: none;
			}

			input,
			textarea,
			select,
			label {
				position: relative;
				text-align: left;
				outline: 0;
				padding: .4em;
				margin-right: .4em;

				font-size: 1.1em;

				display: -moz-inline-stack;
				display: inline-block;
				zoom: 1;
				*display: inline;
			}

			input {
				width: 12em;
			}

		</style>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
		<script src="./ui.formvalidation.js" type="text/javascript"></script>
		<script src="./ui.input.js" type="text/javascript"></script>

		<script src="./external/highlight.pack.js" type="text/javascript"></script>
		<script>
			hljs.tabReplace = '    ';
			hljs.initHighlightingOnLoad();
		</script>

		<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
	</head>

	<body>
		
		<div id="switcher"></div>

		<script type="text/javascript">
			$(function() {
				// Theme Switcher Engine
				$('#switcher').themeswitcher();
			});
		</script>

		<hr />

		<h3>Demo One : text - is required</h3>

		<label for="demo_1">Demo 1</label>
		<input type="text" name="demo_1" id="demo_1" value="" />

		<script type="text/javascript">

			$(function() {
				$('#demo_1').input({
					validation: true,
					rules: {
						required: true
					}
				});
			});

		</script>

		<p>Sample Code:</p>
	<pre>
	<code>
	&lt;label for="demo_1"&gt;Demo 1&lt;/label&gt;
	&lt;input type="text" name="demo_1" id="demo_1" value="" /&gt;

	&lt;script type="text/javascript"&gt;

		$(function() {
			$('#demo_1').input({
				validation: true,
				rules: {
					required: true
				}
			});
		});

	&lt;/script&gt;
	</code>
	</pre>

		<hr />

		<h3>Demo Two : number - not required</h3>

		<label for="demo_2">Demo 2</label>
		<input type="text" name="demo_2" id="demo_2" value="" />

		<script type="text/javascript">

			$(function() {
				$('#demo_2').input({
					validation: true,
					rules: {
						type: 'number'
					}
				});
			});

		</script>

		<p>Sample Code:</p>
	<pre>
	<code>
	&lt;label for="demo_2"&gt;Demo 2&lt;/label&gt;
	&lt;input type="text" name="demo_2" id="demo_2" value="" /&gt;

	&lt;script type="text/javascript"&gt;

		$(function() {
			$('#demo_2').input({
				validation: true,
				rules: {
					type: 'number'
				}
			});
		});

	&lt;/script&gt;
	</code>
	</pre>

		<hr />

		<h3>Demo Tree : number - is required</h3>

		<label for="demo_3">Demo 3</label>
		<input type="text" name="demo_3" id="demo_3" value="" />

		<script type="text/javascript">

			$(function() {
				$('#demo_3').input({
					validation: true,
					rules: {
						type: 'number',
						required: true
					}
				});
			});

		</script>

		<p>Sample Code:</p>
	<pre>
	<code>
	&lt;label for="demo_3"&gt;Demo 3&lt;/label&gt;
	&lt;input type="text" name="demo_3" id="demo_3" value="" /&gt;

	&lt;script type="text/javascript"&gt;

		$(function() {
			$('#demo_3').input({
				validation: true,
				rules: {
					type: 'number',
					required: true
				}
			});
		});

	&lt;/script&gt;
	</code>
	</pre>

		<hr />

		<h3>Demo Four : email validate</h3>

		<label for="demo_4">Demo 4</label>
		<input name="demo_4" id="demo_4" type="text" value="tester@example.com" />

		<script type="text/javascript">

			$(function() {
				$('#demo_4').input({
					validation: true,
					rules: {
						type: 'email'
					}
				});
			});

		</script>

		<p>Sample Code:</p>
	<pre>
	<code>
	&lt;label for="demo_4"&gt;Demo 4&lt;/label&gt;
	&lt;input name="demo_4" id="demo_4" type="text" value="tester@example.com" /&gt;

	&lt;script type="text/javascript"&gt;

		$(function() {
			$('#demo_4').input({
				validation: true,
				rules: {
					type: 'email'
				}
			});
		});

	&lt;/script&gt;
	</code>
	</pre>

		<hr />

		<h3>Demo Five : url validate</h3>

		<label for="demo_5">Demo 5</label>
		<input name="demo_5" id="demo_5" type="text" value="http://www.google.com/m" />

		<script type="text/javascript">

			$(function() {
				$('#demo_5').input({
					validation: true,
					rules: {
						type: 'url'
					}
				});
			});

		</script>

		<p>Sample Code:</p>
	<pre>
	<code>
	&lt;label for="demo_5">Demo 5&lt;/label&gt;
	&lt;input name="demo_5" id="demo_5" type="text" value="http://www.google.com/m" /&gt;

	&lt;script type="text/javascript"&gt;

		$(function() {
			$('#demo_5').input({
				validation: true,
				rules: {
					type: 'url'
				}
			});
		});

	&lt;/script&gt;
	</code>
	</pre>

		<hr />

		<h3>Demo Six : inline Fields</h3>

		<p>This is some text before the <code>ui.formvalidation</code> widget <input type="text" name="demo_6a" id="demo_6a" value="" />  this is some text after the <code>ui.formvalidation</code> widget
			<input type="text" name="demo_6b" id="demo_6b" value=""/> and that was an unmodified input element.</p>

		<script type="text/javascript">

			$(function() {
				$('#demo_6a').input({
					validation: true,
					rules: {
						type: 'number'
					}
				});
			});

		</script>

	<pre>
	<code>
	&lt;p&gt;This is some text before the &lt;code&gt;ui.formvalidation&lt;/code&gt; widget &lt;input type="text" name="demo_6a" id="demo_6a" value="" /&gt;  this is some text after the &lt;code&gt;ui.formvalidation&lt;/code&gt; widget
			&lt;input type="text" name="demo_6b" id="demo_6b" value=""/&gt; and that was an unmodified input element.&lt;/p&gt;

	&lt;script type="text/javascript"&gt;

		$(function() {
			$('#demo_6a').input({
				validation: true,
				rules: {
					type: 'number'
				}
			});
		});

	&lt;/script&gt;
	</code>
	</pre>

		<hr />

		<h3>Demo Seven : pattern 'abc' (case insensitive) only validate</h3>

		<label for="demo_7">Demo 7</label>
		<input name="demo_7" id="demo_7" type="text" value="http://www.google.com/m" />

		<script type="text/javascript">

			$(function() {
				$('#demo_7').input({
					validation: true,
					rules: {
						pattern: '(^ABC$)' // digit test
					}
				});
			});

		</script>

		<p>Sample Code:</p>
	<pre>
	<code>
	&lt;label for="demo_7">Demo 7&lt;/label&gt;
	&lt;input name="demo_7" id="demo_7" type="text" value="http://www.google.com/m" /&gt;

	&lt;script type="text/javascript"&gt;

		$(function() {
			$('#demo_7').input({
				validation: true,
				rules: {
					pattern: '(^ABC$)' // digit test
				}
			});
		});

	&lt;/script&gt;
	</code>
	</pre>

		<hr />

		<h3>Demo Eight : Add an american zipcode validator and validate this value (input wrapped in label)</h3>

		<label>Demo 8 <input name="demo_8" id="demo_8" type="text" value="90210" /></label>

		<script type="text/javascript">

			$(function() {
				$.formvalidation.addValidator('zipcode', function(v) { return v===''||/(^\d{5}$)|(^\d{5}-\d{4}$)/.test(v); }, 'is not a valid US zip code');

				$('#demo_8').input({
					validation: true,
					rules: {
						type: 'zipcode'
					}
				});
			});

		</script>

		<p>Sample Code:</p>
	<pre>
	<code>
	&lt;label>Demo 8 &lt;input name="demo_8" id="demo_8" type="text" value="90210" /&gt;&lt;/label&gt;

	&lt;script type="text/javascript"&gt;

		$(function() {
			$.formvalidation.addValidator('zipcode', function(v) { return v===''||/^\d{5}$)|(^\d{5}-\d{4}$/i.test(v); }, 'is not a valid US zip code');

			$('#demo_8').input({
				validation: true,
				rules: {
					type: 'zipcode'
				}
			});
		});

	&lt;/script&gt;
	</code>
	</pre>

		<hr />

		<h3>Demo Nine : Number less than 100</h3>

		<label>Demo 9 <input name="demo_9" id="demo_9" type="text" value="90210" /></label>

		<script type="text/javascript">

			$(function() {
				$('#demo_9').input({
					validation: true,
					rules: {
						type: 'number',
						max: 99
					}
				});
			});

		</script>

		<hr />

		<h3>Demo Ten : Number greater than 4</h3>

		<label>Demo 10 <input name="demo_10" id="demo_10" type="text" value="90210" /></label>

		<script type="text/javascript">

			$(function() {
				$('#demo_10').input({
					validation: true,
					rules: {
						type: 'number',
						min: 5
					}
				});
			});

		</script>

		<hr />

		<h3>Demo Eleven : No longer than 20 characters</h3>

		<label>Demo 11 <input name="demo_11" id="demo_11" type="text" value="This is a long string value" /></label>

		<script type="text/javascript">

			$(function() {
				$('#demo_11').input({
					validation: true,
					rules: {
						maxlength: 20
					}
				});
			});

		</script>

		<h3>Demo 12 : Password Strength</h3>

		<label>Password <input name="demo_12" id="demo_12" type="password" value="" /></label><br/>
		<label>Re-enter Password <input name="demo_13" id="demo_13" type="password" value="" /></label>

		<script type="text/javascript">

			$(function() {
				$('#demo_12').input({
					validation: true,
					rules: {
						strength: 50
					}
				});
				
				$('#demo_13').input({
					validation: true,
					rules: {
						equalTo: 'demo_12'
					}
				});
			});

		</script>

		<hr />

		<br />

		<br />

		<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
		<script type="text/javascript">
			<!--
				_uacct="UA-359169-1";urchinTracker();
			//-->
		</script>
		<script src="http://pmetrics.performancing.com/3702.js" type="text/javascript"></script>
		<noscript><p><img alt="Performancing Metrics" src="http://pmetrics.performancing.com/3702ns.gif" /></p></noscript>
	</body>
</html>